<!--
 * @Author: lizijian
 * @Date: 2024-03-26 10:41:06
 * @LastEditTime: 2024-03-26 15:09:22
 * @FilePath: \client\src\components\global\ypimage\ypimage.vue
 * @Description: 图片显示组件
-->
<template>
	<div v-if="isLoad" class="absolute flex justify-center items-center w-full h-full text-sm text-gray-400">
		图片加载中
		<i class="animate-spin ri-loader-2-line"></i>
	</div>
	<img
		:src="src"
		:class="[
			'w-full',
			'h-full',
			'object-cover',
			'transition',
			'duration-300',
			isLoad ? 'opacity-0' : 'opacity-100'
		]"
		@load="handleImgLoad"
	/>
</template>
<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		src: {
			type: String
		}
	})
	const isLoad = ref(true)
	const handleImgLoad = () => {
		isLoad.value = false
	}
</script>
